<%@ include file="/jsps/main.jsp" %>

<div id="video-container">
	<div id="video-container-inner">
		<div class="video-title">VẪN NHƯ NGÀY ĐẦU</div>
		<!-- 		<video id="video-content" class="video-js vjs-default-skin" controls
			preload="none" width="640" height="264"
			poster="http://video-js.zencoder.com/oceans-clip.png" data-setup="{}">
			<source src="http://video-js.zencoder.com/oceans-clip.mp4"
				type='video/mp4' />
			<source src="http://video-js.zencoder.com/oceans-clip.webm"
				type='video/webm' />
			<source src="http://video-js.zencoder.com/oceans-clip.ogv"
				type='video/ogg' />			
		</video> -->
		<video id="video-content" class="video-js vjs-default-skin" controls
			preload="none" width="640" height="264" poster="http://corrupt-system.de/assets/media/sintel/sintel-trailer.jpg" 
			data-setup="{}">
						<source src="http://www.w3schools.com/html/mov_bbb.mp4"	type="video/mp4">
						<source src="http://www.w3schools.com/html/mov_bbb.ogg"	type="video/ogg">						
		</video>
		
		<div id="subtitle" class="subtitle">Here is subtitle</div>
		
		

		<div id="video-controls">
			<button onclick="playPauseClick()">Play/Pause</button>
			<button onclick="myStopFunction()">Stop</button>
			<button onclick="recordingFuction()">Thu am</button>
			<button onclick="playRecording()">Nghe lai</button>
		</div>
		
		<audio id="audio-beat" controls="controls" style="margin-top: 20px;">
			<source src="/karaoke-portlet/data/VanNhuNgayDau.mp3"
				type="audio/mpeg">
		</audio>
		
	</div>
</div>

<div id="video-info">
	<aui:layout>
		<aui:column columnWidth="50">
			<div class="row">
				<span class="label">Ten bai hat</span><span class="content">ABC</span><br>
			</div>
			<div class="row">
				<span class="label">Ten bai hat</span><span class="content">ABC</span><br>
			</div>
			<div class="row">
				<span class="label">Ten bai hat</span><span class="content">ABC</span><br>
			</div>
			<div class="row">
				<span class="label">Ten bai hat</span><span class="content">ABC</span><br>
			</div>
		</aui:column>

		<aui:column columnWidth="50">
			<div class="row">
				<span class="label block">Ten bai hat</span> <input type="text"
					style="width: 100%">
			</div>
			<div class="row">
				<span class="label block">Ten bai hat</span> <input type="text"
					style="width: 100%">
			</div>
			<div class="row">
				<span class="label block">Ten bai hat</span> <input type="text"
					style="width: 100%">
			</div>
			<div class="row">
				<span class="label block">Ten bai hat</span> <input type="text"
					style="width: 100%">
			</div>
		</aui:column>
	</aui:layout>
</div>

<div id="video-paging"></div>

<!-- http://localhost:8080/karaoke-portlet/data/bai-hat-1.json -->